<template>
  <div v-if="welcomeTip" class="mb-4 cpt-welcome-tip">
    <div class="message-container assistant-message">
      <div class="message-avatar">
        <div class="assistant-avatar">
          <img v-if="poster" :src="poster" alt="AI" class="avatar-image">
          <span v-else>AI</span>
        </div>
      </div>
      
      <div class="message-content assistant-content">
        <div class="message-text assistant-text ">
          <div v-html="renderedContent" class="markdown-body"></div>
        </div>
        <div class="message-time">系统消息</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'

const props = defineProps({
  welcomeTip: {
    type: String,
    default: ''
  },
  poster: {
    type: String,
    default: ''
  }
})

// 渲染Markdown内容
const renderMarkdown = (text) => {
  if (!text) return ''
  try {
    // 使用marked渲染Markdown，并使用DOMPurify清理HTML
    const html = marked.parse(text)
    return html
  } catch (error) {
    console.error('Error rendering markdown:', error)
    return text
  }
}

// 计算属性：渲染后的内容
const renderedContent = computed(() => {
  return renderMarkdown(props.welcomeTip)
})
</script>

<style lang="scss" scoped>
.cpt-welcome-tip{
  padding: 0.75rem;
  .message-text .markdown-body{
    font-size: 18px;

  }
}
.message-container {
  display: flex;
  margin-bottom: 0.75rem;
}

.assistant-message {
  justify-content: flex-start;
  
  .message-avatar {
    margin-right: 8px;
  }
}

.message-avatar {
  flex-shrink: 0;
}

.assistant-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  overflow: hidden;
  background-color: #f0f9eb;
  color: #67c23a;
  
  .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}



.assistant-content {
  text-align: left;
  background-color: #f7f7f7;
  padding: 10px;
}

.message-text {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.assistant-text {
  background-color: #f7f7f7;
  color: #333;
  border-top-left-radius: 2px;
  padding-bottom: 4px;
}

.message-time {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}


</style>
